<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!--  <link href="framework/icon.css" rel="stylesheet">-->
  <link href="css/reset.css" rel="stylesheet">
  <link rel="stylesheet" href="css/iconfont.css">
  <link href="/dist/output.css" rel="stylesheet">
  <title>饿了么 支付页面</title>
</head>
<body>
<div class="w-full h-full">
  <!--    header部分-->
  <header class="w-full h-12 bg-[#0097FF] text-[#fff] text-xl fixed left-0 top-0 z-[1000] flex justify-center items-center ">
    <p>在线支付</p>
  </header>
  <!--   订单信息部分-->
  <h3 class="mt-12 box-border p-4 text-base text-[300] text-[#999]">订单信息:</h3>
  <div class="box-border p-4 text-4 text-[#666] flex justify-between items-center">
    <p>
      万家饺子馆（软件园E18店）
      <i class="fa fa-caret-down" id="showBtn"></i>
    </p>
    <p class="text-[orange]">&#165;49</p>
  </div>
  <!--    订单明细部分-->
  <ul class="w-full" id="detailedBox">
    <li class=" box-border px-4 py-1  flex justify-between items-center">
      <p class="text-xs text-[#666]">纯肉鲜肉（水饺）x2</p>
      <p class="text-xs text-[#666]">&#165;15</p>
    </li>
    <li class=" box-border px-4 py-1  flex justify-between items-center">
      <p class="text-xs  text-[#666]">玉米鲜肉（水饺）</p>
      <p class="text-xs  text-[#666]">&#165;16</p>
    </li>
    <li class=" box-border px-4 py-1  flex justify-between items-center">
      <p class="text-xs  text-[#666]">配送费</p>
      <p class="text-xs  text-[#666]">&#165;3</p>
    </li>
  </ul>
  <!--    支付方式部分-->
  <ul class="w-full">
    <li class="w-full box-border p-4  flex justify-between items-center">
      <img src="assets/img/alipay.png" class="w-33 h-9">
      <i class="fa fa-check-circle text-[5vw] text-[#38CA73]"></i>
    </li>
    <li class="w-full box-border p-4  flex justify-between items-center">
      <img src="assets/img/wechat.png" class="w-33 h-9">

    </li>

  </ul>
  <div class="w-full box-border p-4">
    <button class="w-full h-10 border-none outline-none rounded-[4px] bg-[#38CA73] text-white">确认支付</button>
  </div>
    <!--        底部菜单部分-->
  <ul class="w-full h-14 border-t border-t-[#DDD] bg-white fixed left-0 bottom-0 flex justify-around items-center ">
    <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer " onclick="location.href='index.html'">
      <div class="text-xl leading-none"><i class="i ic:baseline-home"></i></div>
      <p class="text-xs leading-none">首页</p>
    </li>
    <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer ">
      <div class="text-xl leading-none"><i class="i ph:compass"></i></i></div>
      <p class="text-xs leading-none">发现</p>
    </li>
    <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer ">
      <div onclick="location.href='orderList.html'" class="text-xl leading-none"><i class="i mdi:document"></i></div>
      <p class="text-xs leading-none">订单</p>
    </li>
    <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer ">
      <div class="text-xl leading-none"><i class="i ic:baseline-person"></i></div>
      <p class="text-xs leading-none">我的</p>
    </li>

  </ul>

  </div>
</body>
</html>